<template>
  <div>
    <!-- background-color="#545c64"
    text-color="#fff"
  active-text-color="#ffd04b" -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo demo"
      mode="horizontal"
      @select="handleSelect"
      :router="true"
    >
      <template>
        <div class="left">
          <img
            @click="$router.push('/')"
            class="leftbox1image"
            src="@/assets/logo.png"
          />
        </div>
      </template>
      <el-menu-item index="/">首页中心</el-menu-item>
      <el-menu-item v-show="pushid" :index="'/video?videoid=' + pushid"
        >我的工作台</el-menu-item
      >
      <el-menu-item index="/demo">作品管理</el-menu-item>
      <!-- <el-menu-item index="/">首页中心</el-menu-item> -->
      <template>
        <div class="right">
          <el-dropdown @command="handleClick">
            <span class="el-dropdown-link">
              <el-avatar :src="avatar"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="out">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "HomeView",
  data() {
    return {
      // flag:this.$store.getters["routerpush/routerpushsflag"],
      activeIndex: "/",
      avatar: this.$store.getters.avatar,
      pushid: this.$store.getters["routerpush/routerpushs"],
    };
  },
  mounted() {
    this.$nextTick(function () {
      //仅在整个视图都被重新渲染之后才会运行的代码
      this.activeIndex = this.$route.fullPath;
      if (this.$route.path === "/video") {
        this.pushid = this.$store.getters["routerpush/routerpushs"];
      }
    });
  },
  methods: {
    ...mapActions("user", ["logout"]),
    add() {},
    handleSelect(key, keyPath) {
      // console.log(key,keyPath);
      //   this.activeIndex = key;
      //   console.log(this.activeIndex);
    },
    handleClick(val) {
      if (val === "out") {
        //登出
        this.logout().then(() => {
          this.$router.push("/login");
          this.$message({
            message: "登出",
            type: "success",
          });
        });
      }
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.left {
  float: left;
  width: 150px;
  height: 65px;
  margin-top: -4px;
  margin-right: 10px;
  .leftbox1image {
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}
.right {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
.demo {
  height: 54px;
}
.demo li {
  height: 54px;
}
</style>